<template>
	<view class="container">
		<u-navbar back-icon-color="#fff" title-color="#fff" :border-bottom="false" title="核销" :background="{'background':'transparent'}"></u-navbar>
		<view class="bg">
			<u-image src="https://photo.hiyipin.net/USER/97faebf0-f0de-4fcd-bf74-c7464ae4815f.png" width="100%" height="850"></u-image>
			<view class="info">
				<view class="store-info">
					<u-image width="176" height="176" border-radius="10" :src="data.sharePackageImg || data.couponImg"></u-image>
					<view class="box">
						<view class="name">{{data.title}}</view>
						<view class="present-price"><text>￥</text>{{data.price || data.packagePrice}}</view>
						<view class="original-price">￥{{data.priceOff || data.orignPrice}}</view>
					</view>
				</view>
				<view class="code-img">
					<canvas canvas-id="qrcode" @click="preview" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		data() {
			return {
				data: ''
			};
		},
		onLoad(options) {
			let data = uni.getStorageSync('writeOffData')
			if(data.sharePackageImg){
				data.sharePackageImg = this.imageURL + data.sharePackageImg
			}
			if(data.couponImg){
				data.couponImg = this.imageURL + data.couponImg
			}
			this.data = data
			const self = this
			uQRCode.make({
				canvasId: 'qrcode',
				text: JSON.stringify({
					orderNumber: options.orderNumber,
					type: 1
				}),
				margin: 10,
				size: uni.upx2px(312)
			}).then(res => {
				self.url = res
			}).finally(() => {
				uni.hideLoading()
			})
		},
		methods: {
			preview() {
				uni.previewImage({
					urls: [this.url]
				})
			}
		},
		onUnload() {
			uni.removeStorageSync('writeOffData')
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container {
		background: linear-gradient(180deg, #FF3768, #FC6161);
		height: 100%;

		.bg {
			position: relative;

			.code-img {
				position: absolute;
				width: 332rpx;
				height: 332rpx;
				border: 1rpx solid #EEEEEE;
				border-radius: 10rpx;
				left: 50%;
				transform: translateX(-50%);
				bottom: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				canvas {
					width: 312rpx;
					height: 312rpx;
				}
			}

			.info {
				position: absolute;
				width: 100%;
				padding: 50rpx 60rpx;
				top: 0;
				height: 100%;

				.store-info {
					display: flex;
					align-items: center;

					.box {
						flex: 1;
						margin-left: 30rpx;

						.original-price {
							font-size: 24rpx;
							color: #aaa;
							text-decoration: line-through;
						}

						.present-price {
							color: #F44B17;
							font-size: 48rpx;
							font-weight: bold;

							text {
								font-weight: normal;
								font-size: 30rpx;
							}
						}
					}

					.name {
						font-size: 36rpx;
						margin-bottom: 20rpx;
						font-weight: 800;
					}
				}
			}
		}
	}
</style>
